import React, { useEffect, useState } from "react";
import {
  Space,
  Table,
  Button,
  Modal,
  Form,
  Input,
} from "antd";
const User = () => {
    return (
        <>
        <Button onClick={() => refetch()}>查询</Button>
        <Button onClick={() => {setFormValues(()=>{name:""});setOpen(true)}}>新增</Button>
        <Table<role> loading={isFetching} dataSource={data.data.rows} columns={columns} rowKey="id">
          {/* <Column title="" dataIndex="firstName" key="firstName" />
          <Column title="Last Name" dataIndex="lastName" key="lastName" />
          <Column title="Age" dataIndex="age" key="age" />
          <Column title="Address" dataIndex="address" key="address" /> */}
  
          <Column
            title="action"
            key="action"
            render={(_: any, record: role) => (
              <Space size="middle">
                <a>Invite {record.name}</a>
                <a onClick={() => deleteRole(record.id)}>Delete</a>
              </Space>
            )}
          />
        </Table>
  
        <Modal
          title="创建角色"
          okText="确定"
          cancelText="取消"
          open={open}
          okButtonProps={{ autoFocus: true, htmlType: 'submit' }}
          // onOk={handleOk}
          destroyOnClose
          onCancel={() => setOpen(false)}
          modalRender={(dom) => (
            <Form
              form={form}
              labelCol={{ span: 6 }}
              wrapperCol={{ span: 18 }}
              name="form_in_modal"
              initialValues={formValues}
              clearOnDestroy
              onFinish={(values) => onCreate(values)}
            >
              {dom}
            </Form>
          )}
        >
          <Form.Item
            name="id"
            label="角色名称"
            hidden
            rules={[{ required: false, message: '请输入!' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            name="name"
            label="角色名称"
            rules={[{ required: true, message: '请输入!' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item name="description" label="描述">
            <Input type="textarea" />
          </Form.Item>
        </Modal>
      </>
    );
}

export default User;